<template>
  <div class="body">
    <div style=" width: 100%;
    height: 74px;
    background-color: #1c52e4;
    box-shadow: 1px 1px 10px #eaeaea;">
      <Header></Header>
    </div>

    <div class="content">
      <img src="../assets/apply/bg-header-1.png" class="bg-header">
      <img src="../assets/apply/bg-middle.png" class="bg-middle">
      <div class="content-box">
        <img src="../assets/apply/header-img.png" class="header-img">
        <img src="../assets/apply/banner-img-1.png" class="banner-img">
        <img src="../assets/apply/banner-img-2.png" class="banner-img">
        <img src="../assets/apply/banner-img-3.png" class="banner-img banner-img-last">
        <img src="../assets/apply/right-img.png" class="right-img">
      </div>
      <img src="../assets/apply/bottom-img.png" class="bottom-img">
    </div>
  </div>

</template>

<script>
  import Header from "../components/Header";
    export default {
        name: "Apply",
      components:{
          Header,
      }
    }
</script>

<style scoped>
  div {
    display: block;
  }

  .body {
    width: 100%;
    height: 100%;
    background-color: #e3f0fe;
    position: relative;
  }

  .content {
    width: 1150px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
  }


  .bg-header {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }

  .bg-middle {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 50px;
    left: 0;
  }

  .content-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    /*scrollbar-width: none;*/
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .header-img {
    padding-top: 40px;
    display: block;
    width: 700px;
    height: auto;
    margin-bottom: 20px;
  }

  .banner-img {
    display: block;
    width: 650px;
    height: auto;
  }

  .banner-img+.banner-img {
    margin-top: 6px;
  }

  .banner-img-last {
    margin-bottom: 110px;
  }

  .right-img {
    position: absolute;
    top: 90px;
    right: 0;
    display: block;
    width: auto;
    height: 600px;
  }

  .bottom-img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>
